import { asyncRoutes } from './router/asyncRoutes';
//权限控制
import { getProfileAPI } from './apis/user'
import router from './router'
import { useUserStore } from './stores/user'
import { getToken } from './utils/auth'
import type { RouteRecordRaw } from 'vue-router';
//引入NProgress
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { useMenuStore } from './stores/menu';

const WHITE_LIST = ['/login', '/404']

/**
 * 处理一级路由数据
 */
const getFirstRoutePerms=(permsArr:string[])=>{
 const newArr=permsArr.map(item=>{
  return item.split(':')[0]
 })
 return [...new Set(newArr)]
}
//处理二级路由权限数据
const getSecondRoutePerms=(permsArr:string[])=>{
 const newArr=permsArr.map(item=>{
   const arr=item.split(':')
   return `${arr[0]}:${arr[1]}`
 })
 return [...new Set(newArr)]
}

const getRoutes=(
  firstRoutePerms:string[],
  secondRoutePerms:string[],
   asyncRoutes:RouteRecordRaw[]
)=>{
  if(firstRoutePerms.includes('*')){
    // 管理员（拷贝 - 防止重复登录同一个用户时，此变量值返回给外面后不断 push * 地址，导致左侧菜单 key 重复报错问题）
    return [...asyncRoutes];
  }
  // 根据一级和二级对动态路由表做过滤 return出去过滤之后的路由表
  // 1. 根据一级路由对动态路由表做过滤
    const firstRoutes=asyncRoutes.filter((route:RouteRecordRaw)=>{
     return firstRoutePerms.includes(route.meta!.permission!);
  });
    console.log(firstRoutes)
  
  //2.对二级路由做过滤
    const lastRoutes=firstRoutes.map((item:RouteRecordRaw)=>{
      return {
        ...item,
        children:item!.children!.filter(obj=>secondRoutePerms.includes(obj.meta!.permission!)),
      };
    });
    return lastRoutes;
}
//路由全局前置守卫
router.beforeEach( async (to, from, next) => {
  //2.0开启进度条
  NProgress.start();
  //2.1获取token
  const token = getToken()
  //判断是否有token
  if (token) {
    //2.2.1 判断去的页面是否是登录页,如果是则拦截到首页
    if(to.path==='/login'){
      next('/')
    }else{
      //2.2.2 获取用户权限数据
      const store=useUserStore()
      if(!store.profile.id){
        const res=await getProfileAPI()
        store.setProfile(res.data)
        console.log(res.data.permissions)
        const firstRoutePerms=getFirstRoutePerms(res.data.permissions)
        console.log(firstRoutePerms)
        const secondRoutePerms=getSecondRoutePerms(res.data.permissions)
        console.log(secondRoutePerms)
  
        //3.根据权限标识 过滤筛选 动态路由表 最终得到有资格显示到左侧的所有路由表
        const perRoutes=getRoutes(firstRoutePerms,secondRoutePerms,asyncRoutes)
        console.log('最终路由表', perRoutes)

        //4.把动态路由表加入到路由系统中(当浏览器中访问路由的路径 显示渲染出来对应的组件)
        perRoutes.push(
          //404 地址配置为*=>> 匹配不存在的地址,放到过滤动态路由规则后边
          {
            path:"/:pathMath(.*)*",
            component:()=>import("@/views/NotFound.vue"),
            meta:{hidden:true},
            children:[],
          }
        );
        perRoutes.forEach(route=>{
          router.addRoute(route)
        });
        //5.存入Pinia渲染左侧菜单
        const menuStore=useMenuStore()
        menuStore.setMenuList(perRoutes)
        //关闭进度条
        NProgress.done()
        next({...to});
      }
      //关闭进度条
      NProgress.done()
      next()
    }
  } else {
    // 没有token
    if (WHITE_LIST.includes(to.path)) {
      NProgress.done()
      next();
    } else {
      NProgress.done()
      next("/login");
    }
  }
})